.el-header{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	// display: none !important;
	//box-shadow: 0 2px 4px 0 var(--cb-color-shadow,rgba(0,0,0,0.16));
}
.el-container {
  width: 100%;
  height: 100%;
  :deep(.el-header) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    padding: 0 20px 0 0;
    background-color: var(--el-bg-color);
    border-bottom: 1px solid var(--el-header-border-color);
    .header-lf {
      display: flex;
      align-items: center;
      overflow: hidden;
      white-space: nowrap;
      .logo {
        display: flex;
        height: 55px;
        .logo-button {
          width: 55px;
		  height: 55px;
          position: relative;
		  background-color: var(--el-color-primary);
		  cursor: pointer;
		  transition: all 0.3s ease-out 0s;
		  span{
			  display: block;
			  position: absolute;
			  left: 17.5px;
			  background-color: rgb(255, 255, 255);
			  width: 20px;
			  height: 2px;
			  transition: all 0.3s ease-out 0s;
			  &:first-child{
				  top: 19px;
				  transform: rotate(0deg);
				  transform-origin: left center;
			  }
			  &:nth-child(2) {
			      top: 26px;
			  }
			  &:nth-child(3) {
			      top: 33px;
			      transform: rotate(0deg);
			      transform-origin: left center;
			  }
		  }
		  &.active{
			  span{
				  left: 19.5px;
				  &:first-child {
				      transform: rotate(45deg);
				  }
				  &:nth-child(2) {
				      opacity: 0;
				  }
				  &:nth-child(3) {
				      transform: rotate(-45deg);
				  }
			  }
			  
		  }
		  &:hover {
		      text-decoration: none;
		  }
        }
		.logo-message{
			padding: 0 20px;
			border-right:1px solid var(--el-header-border-color);
			margin-right: 14px;
			.logo-img{
				width: 22px;
				height: 22px;
				margin-right: 6px;
			}
			.logo-text {
			  font-size: 18px;
			  line-height: 55px;
			  font-weight: 500;
			  color: var(--el-header-logo-text-color);
			  white-space: nowrap; 
			  font-family: "Helvetica Neue";
			}
		}
      }
    }
  }
  .classic-content {
    height: calc(100% - 55px);
    :deep(.el-aside) {
      width: auto;
      background-color: var(--el-menu-bg-color);
      border-right: 1px solid var(--el-aside-border-color);
    }
    .classic-main {
      display: flex;
      flex-direction: column;
	  padding-top: 55px;
    }
  }
}
.el-drawer{
	padding: 0;
}
.placeholder-box{
	height: 55px;
}
.fixed{
	position: fixed;
	top: 55px;
	bottom: 0px;
	left: 0px;
	font-size: 14px;
	transform: translateX(-100%);
	transition: all 300ms ease-in-out 0s;
	background-color: var(--el-menu-right-bg-color);
	.enter-done{
		transform: translateX(-100%);
	}
}
.menu-shade{
	position: fixed;
	inset: 0px;
	z-index: 1999;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.2);
}
.collect-container{
	.collect-title{
		font-weight: 600;
		font-size: 14px;
		margin-bottom: 20px;
		line-height: 32px;
		padding-left: 8px;
		color: var(--el-menu-right-title-color);
		&.pt{
			padding-top: 40px;
		}
	}
	.simple-list{
		display: flex;
		flex-wrap: wrap;
		.simple-item{
			margin-bottom: 5px;
			cursor: pointer;
			
			&.simple-4{
				width: 200px;
				margin-right: 27px;
				&:nth-child(4n){
					margin-right: 0;
				}
			}
			&.simple-3{
				width: 280px;
				margin-right: 27px;
				&:nth-child(3n){
					margin-right: 0;
				}
			}
			.simple-title{
				font-size: 14px;
				color: var(--el-menu-right-desc-color);
				.simple-tag{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 90%;
					span{
						position: relative;
						top: 1px;
					}
				}
				.simple-arrow{
					display: inline-block;
					vertical-align: middle;
				}
				
			}
			.simple-desc{
				padding: 8px;
				font-size: 14px;
				color: var(--el-menu-right-text-color);
				display: flex;
				justify-content: space-between;
				.simple-name{
					line-height: 22px;
					flex:1;
					margin-right: 10px;
				}
				.collect-box{
					width: 18px;
					height: 18px;
					padding-top: 1px;
				}
				.icon{
					display: none;
					text-align: center;
				}
				.noCollect{
					margin-right: 2px;
				}
				&.active{
					.icon{
						display: block;
					}
				}
				&:hover{
					background-color: var(--el-menu-right-label-bg-color);
					color: var(--el-color-primary);
					.collect-box{
						.icon{
							display: block;
						}
					}
				}
				
			}
		}
	}
}
.mt{
	margin-top: 0 !important ;
}
.aside-box {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--el-menu-left-bg-color);
	z-index: 2000;
	width: 210px;
	.aside-item{
		height: 48px;
		padding: 0 20px;
		position: relative;
		cursor: pointer;
		img{
			width: 16px;
			height: 16px;
		}
		.sle-value{
			font-size: 14px;
			margin-left: 10px;
			color: var(--el-menu-left-text-color);
		}
		&:first-child{
			background-color: var(--el-menu-left-frist-color);
		}
		&:last-child{
			margin-bottom: 56px;
		}
		&.active,&:hover{
			background-color: var(--el-menu-left-item-color);
			color: var(--el-color-primary);
			.el-icon{
				color: var(--el-color-primary);
			}
			.sle-value{
				color: var(--el-color-primary);
			}
			&:before {
				position: absolute;
				top: 10px;
				bottom: 10px;
				left: 0;
				width: 3px;
				content: "";
				background-color: var(--el-color-primary);
			}
		}
	}
	&.active{
		&.enter-done{
			transform: translateX(0px);
		}
	}
}
.submenu-box{
	z-index: 2000;
	width: 980px;
	overflow: hidden;
	.menu-close{
		position: absolute;
		top: 13px;
		right: 6px;
		padding: 10px;
		z-index: 9;
		cursor: pointer;
	}
	.submenu-left-list{
		padding: 32px;
		padding-top: 15px;
		padding-right: 0;
		box-sizing: border-box;
		display: flex;
		flex: 1;
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-right: 1px solid var(--el-header-border-color);
		.s-menu-bottom{
			width: 100%;
			padding-bottom: 20px;
			box-sizing: border-box;
		}
		.search-menu-input{
			border-bottom: 1px solid var(--el-menu-right-input-border-color);
			width: calc(100% - 50px);
			color: var(--el-menu-right-text-color);
			margin-top: 7px;
		}
	}
	&.enter-done{
		left: 0;
	}
	&.active{
		&.enter-done{
			transform: translateX(0px);
			left: 210px;
		}
	}
}
.el-tabs__item:v-deep{
	font-weight: 400;
}
.colums-3{
	columns: 200px 3;
}
.colums-4{
	columns: 200px 4;
}
.list-content{
	height: 100%;
	column-gap: 12px;
	-webkit-column-fill: balance;
	-moz-column-fill: balance;
	column-fill: balance;
	margin-top: 20px;
	padding-right: 20px;
	.s-item{
		//display: inline-block;
		padding-bottom: 50px;
		width: 100%;
		break-inside: avoid;
		.s-message{
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
			padding: 8px;
			margin-right: 30px;
			color: var(--el-menu-right-text-color);
			margin-bottom: 5px;
			font-size: 13px;
			.collect-box{
				width: 18px;
				height: 18px;
				margin-left:5px;
				.icon{
					display: none;
				}
				.noCollect{
					margin-right: 2px;
				}
				.active{
					display: block;
				}
			}
			&.s-menu-label{
				cursor: pointer;
				transition: all 0.3s ease-out 0s;
				.router-name{
					flex: 1;
					margin-right: 5px;
				}
				&:hover{
					background-color: var(--el-menu-right-label-bg-color);
					
					&.s-message{
						color:var(--el-color-primary)
					}
					.icon{
						display: flex;
					}
				}
			}
		}
		.s-title{
			font-weight: 600;
			font-size: 14px;
			color: var(--el-menu-right-title-color);
			margin-bottom: 5px;
		}
		.s-desc{
			color: var(--el-menu-right-desc-color);
		}
	}
}

.noMargin{
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}